<template>
  <div
    class="gongnv"
    :style="positionstyle"
    :id="'gongnv_' + name"
    draggable="false"
  >
    <div style="color: red">{{ girl.fenghao }}</div>
    <div style="color: blue">{{ girl.score }}</div>
    <img :src="img" width="100" height="100" draggable="false" />
  </div>
</template>

<script lang="ts">
import { watch } from "fs-extra";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { randomInt } from "../common/Calculate";
import { Girl } from "../entities/Girl";

@Component
export default class Beauty extends Vue {
  @Prop() private name!: string;
  @Prop() private score!: number;
  @Prop() private img!: number;
  @Prop() private girl!: Girl;
  @Prop() private gx!: string;
  @Prop() private gy!: string;
  @Prop() private index!: number;
  private x: number | any = 0;
  private y: number | any = 0;
  private errorClick: number = 0;
  private positionstyle: string | any = null;
  private ele: HTMLElement | any;

  public created() {
    // console.log("created", this.name);
    console.log("创建", this.girl, this.index);
    console.log(this.gx, this.gy, this.x, this.y);
  }
  private generatePosition(nx: number, ny: number): void {
    this.x = nx;
    this.y = ny;
    this.positionstyle = {
      left: nx + "px",
      top: ny + "px",
    };
  }
  private resetPosition(nx: number, ny: number): void {
    // nx -= 20;
    // ny -= 120;
    let offsetX = nx - this.x;
    let offsetY = ny - this.y;
    offsetX = this.flatten(offsetX);
    offsetY = this.flatten(offsetY);
    this.x = nx;
    this.y = ny;

    let viewX = this.ele.style.left.split("px")[0];
    let viewY = this.ele.style.top.split("px")[0];

    this.ele.style.left = parseInt(viewX) + offsetX + "px";
    this.ele.style.top = parseInt(viewY) + offsetY + "px";
  }

  private flatten(val: number): number {
    const MAX_OFFSET = 5;
    if (val > MAX_OFFSET) {
      val = MAX_OFFSET;
    } else if (val < -MAX_OFFSET) {
      val = -MAX_OFFSET;
    }
    return val;
  }

  public mounted() {
    console.log("MOUNTED", this.name);

    this.ele = document.getElementById("gongnv_" + this.name);
    // this.generatePosition(randomInt(700, 1200), randomInt(500, 700));

    this.generatePosition(
      parseInt(this.gx.split("px")[0]),
      parseInt(this.gy.split("px")[0])
    );

    this.ele.onmouseup = () => {
      //点击第头牌宫女
      if (this.index == 0) {
        this.$emit("xuanFei", this.girl);
        this.errorClick = 0;
      }
      //不点击
      else {
        alert("居然不选最漂亮的给皇上，你完蛋了");
        this.errorClick++;
        if (this.errorClick > 2) {
          window.location.href = "https://www.baidu.com";
          alert("去百度你喜欢的美女吧~");
        }
      }
    };
  }

  @Watch("gx", { immediate: true })
  private onGxChange(val: string) {
    console.log("Gx changed", val, this.name);
    this.x = val;
    if (this.ele != null) {
      this.ele.style.left = val;
    }
  }

  @Watch("gy", { immediate: true })
  private onGyChange(val: string) {
    console.log("Gy changed", val, this.name);
    this.y = val;
    if (this.ele != null) {
      this.ele.style.top = val;
    }
  }
}
</script>

<style>
</style>